<template>
  <div class="leftwrap">
    <div class="leftcwrap">
      <div class="leftbox usermenuBox">
        <el-row class="tac">
          <el-col :span="24">
            <el-menu
              default-active="3-3"
              class="el-menu-vertical-demo"
              @open="handleOpen"
              @close="handleClose"
              background-color="#fff"
              text-color="#666" active-text-color="#3161ff"
              :unique-opened="true"
              :collapse-transition="true"  @select="handleMenuSelect">
              <el-menu-item index="1">
                <span slot="title">一码通首页</span>
              </el-menu-item>
              <el-menu-item index="2">
                <span slot="title">版权管理</span>
              </el-menu-item>
              <el-submenu index="3">
                <template slot="title">
                  <span>授权管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="3-1">授权列表</el-menu-item>
                  <el-menu-item index="3-2">授权码订单</el-menu-item>
                  <el-menu-item index="3-3">被授权商列表</el-menu-item>
                  <el-menu-item index="3-4">商品列表</el-menu-item>
                  <el-menu-item index="3-5">用码列表</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="4">
                <template slot="title">
                  <span>统计分析</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="4-1">数据统计</el-menu-item>
                  <el-menu-item index="4-2">IP分析</el-menu-item>
                  <el-menu-item index="4-3">被授权商分析</el-menu-item>
                  <el-menu-item index="4-4">授权分析</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="5">
                <template slot="title">
                  <span>标签管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="5-1">我的标签库</el-menu-item>
                  <el-menu-item index="5-2">购买记录</el-menu-item>
                  <el-menu-item index="5-3">使用记录</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="6">
                <template slot="title">
                  <span>消费管理</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="6-1">合同列表</el-menu-item>
                  <el-menu-item index="6-2">开具发票</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
              <el-submenu index="7">
                <template slot="title">
                  <span>账号设置</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item index="7-1">账号信息</el-menu-item>
                  <el-menu-item index="7-2">子账号设置</el-menu-item>
                </el-menu-item-group>
              </el-submenu>
            </el-menu>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LeftMenu',
  data () {
    return {}
  },
  methods: {
    handleOpen (key, keyPath) {
      console.log(key, keyPath)
    },
    handleClose (key, keyPath) {
      console.log(key, keyPath)
    },
    handleMenuSelect (index, indexPath) {
      console.log(index, indexPath)
      if (indexPath[0] === '1') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=ymt0'
      } else if (indexPath[0] === '2') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=ymt1'
      } else if (indexPath[1] === '3-1') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=ymt8'
      } else if (indexPath[1] === '3-2') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=ymt2'
      } else if (indexPath[1] === '3-3') {
        this.$router.push('/licenseeslist')
      } else if (indexPath[1] === '3-4') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=ymt4'
      } else if (indexPath[1] === '3-5') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=ymt5'
      } else if (indexPath[1] === '4-1') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=data'
      } else if (indexPath[1] === '4-2') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=ipData'
      } else if (indexPath[1] === '4-3') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=proData'
      } else if (indexPath[1] === '4-4') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=authData'
      } else if (indexPath[1] === '5-1') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=labelList'
      } else if (indexPath[1] === '5-2') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=labelbuyList'
      } else if (indexPath[1] === '5-3') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=labeluseList'
      } else if (indexPath[1] === '6-1') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=contractList'
      } else if (indexPath[1] === '6-2') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=invoice'
      } else if (indexPath[1] === '7-1') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=accountInfo'
      } else if (indexPath[1] === '7-2') {
        window.location.href = 'https://www.ipyimatong.com/web/user/user_index.jsp?toUrl=childAccount'
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.usermenuBox .el-menu {
    border-right: 0;
}
.usermenuBox li.el-submenu {
  border-bottom: 1px solid #e4e4e4;
  line-height: 60px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 16px;
  color: #666;
  padding: 0!important;
}
.usermenuBox .el-submenu__title {
  height: 59px;
  line-height: 58px;
  font-size: 16px;
  padding: 0 0 0 27px!important;
  border-left: 4px solid #fff;
}
.usermenuBox .el-submenu__title:hover {
  border-left: 4px solid #7494ff!important;
  background-color: #f8f8f8!important;
}
.usermenuBox .el-submenu__title:focus {
  border-left: 4px solid $baseColor!important;
  background-color: #fff!important;
  color: $baseColor!important;
}
.usermenuBox .el-menu-item.is-active {
  border-left: 4px solid $baseColor;
  background-color: #fff;
  color: $baseColor;
}
.usermenuBox .el-menu-item {
  border-left: 4px solid #fff;
  border-bottom: 1px solid #e4e4e4;
  height: 59px;
  line-height: 58px;
  background-color: #fff;
  box-sizing: border-box;
  font-size: 16px;
  color: #666;
  padding: 0 0 0 23px!important;
}
.usermenuBox .el-menu-item:hover {
  border-left: 4px solid #7494ff!important;
  background-color: #f8f8f8!important;
}
.usermenuBox .el-menu-item:focus {
  border-left: 4px solid $baseColor!important;
  background-color: #fff!important;
  color: $baseColor!important;
}
.usermenuBox ul[role="menu"] .el-menu-item {
  width: 100%;
  min-width: 1px;
  line-height: 40px;
  height: 40px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 0;
  padding: 0 0 0 23px!important;
}
.usermenuBox ul[role="menu"] .el-menu-item-group .el-menu-item-group__title {
  height: 0;
  padding: 0!important;
}
.usermenuBox ul[role="menu"] .el-menu-item-group:last-child {
  margin-bottom: 21px;
}
.usermenuBox .el-submenu__title i{
  color: #cbcbcb!important;
  font-size: 18px!important;
  right: 18px!important;
}
</style>

<style lang="stylus" scoped>
@import '~styles/varibles.styl'
.leftwrap
  background-color $bgCfff
  width 180px
  position absolute
  z-index 2
  top 0
  left 0
  height 100%
  box-sizing border-box
  padding-top 70px
  overflow hidden
.leftcwrap
  height 100%
  width 180px
  position relative
.leftbox
  height 100%
  overflow-x hidden
  overflow-y auto
  width 180px
  box-sizing border-box
.leftbox::-webkit-scrollbar-track-piece
  background-color rgba(0, 0, 0, 0)
  border-left 1px solid rgba(0, 0, 0, 0)
.leftbox::-webkit-scrollbar
  width 4px
  height 8px
  border-radius 4px
.leftbox::-webkit-scrollbar-thumb
  background-color rgba(0, 0, 0, 0.1)
  background-clip padding-box
  border-radius 4px
  min-height 10px
.leftbox::-webkit-scrollbar-thumb:hover
  background-color rgba(0, 0, 0, 0.2)
  border-radius 4px
</style>
